<template>
  <div>
    <div class="barBox" id="pieBox"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.createEcharts();
  },
  methods: {
    createEcharts(val) {
      let myChart = echarts.init(document.querySelector("#pieBox"));

      let option = {
        // legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "1", "2", "3", "4"],
            ["正常", 86.5, 2.1, 8.7, 43.1],
            ["异常", 41.1, 30.4, 65.1, 53.3],
          ],
        },
        title: [
          {
            text: "桥梁预警：正常",
            left: "40%",
            top: "90%",
            textStyle: {
              color: "#2BB6FF",
              fontSize: 16,
              fontWeight: "bold",
            },
          },
          {
            text: "车流量监测",
            left: "22%",
            top: "40%",
            textStyle: {
              color: "#2BB6FF",
              fontSize: 14,
            },
          },
          {
            text: "应变监测",
            left: "65%",
            top: "40%",
            textStyle: {
              color: "#2BB6FF",
              fontSize: 14,
            },
          },
          {
            text: "绕度监测",
            left: "23%",
            top: "83%",
            textStyle: {
              color: "#2BB6FF",
              fontSize: 14,
            },
          },
          {
            text: "视觉挠度",
            left: "65%",
            top: "83%",
            textStyle: {
              color: "#2BB6FF",
              fontSize: 14,
            },
          },
        ],

        series: [
          {
            type: "pie",
            radius: ["20%", "33%"],
            center: ["30%", "22%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            encode: {
              itemName: "product",
              value: "1",
            },
            itemStyle: {
              normal: {
                borderRadius: 10,
                // borderColor: "#fff",
                borderWidth: 3,
                //每根柱子颜色设置
                color: function (params) {
                  let colorList = [
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#33FF99", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1E9487", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    "rgba(232, 13, 66, 0.75)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
          {
            type: "pie",
            radius: ["20%", "33%"],
            center: ["71.6%", "22%"],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderRadius: 10,
                // borderColor: "#fff",
                borderWidth: 3,
                //每根柱子颜色设置
                color: function (params) {
                  let colorList = [
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#33FF99", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1E9487", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    "rgba(232, 13, 66, 0.75)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
              position: "center",
            },
            encode: {
              itemName: "product",
              value: "2",
            },
          },
          {
            type: "pie",
            radius: ["20%", "33%"],
            center: ["30%", "65%"],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderRadius: 10,
                // borderColor: "#fff",
                borderWidth: 3,
                //每根柱子颜色设置
                color: function (params) {
                  let colorList = [
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#33FF99", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1E9487", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    "rgba(232, 13, 66, 0.75)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
              position: "center",
            },
            encode: {
              itemName: "product",
              value: "3",
            },
          },
          {
            type: "pie",
            radius: ["20%", "33%"],
            center: ["71.6%", "65%"],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                borderRadius: 10,
                // borderColor: "#fff",
                borderWidth: 3,
                //每根柱子颜色设置
                color: function (params) {
                  let colorList = [
                    {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#33FF99", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1E9487", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                    "rgba(232, 13, 66, 0.75)",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
              position: "center",
            },
            encode: {
              itemName: "product",
              value: "4",
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.barBox {
  height: 300px;
  width: 100%;
}
</style>